import React from 'react'
import { BaseListPage, IBaseListPageProps ,IBaseListPageState, columnRenders, UdDateRangePicker, UdPage, UdPageHeader, UdFilter, UdToolbar, UdTable, http} from '@/lib'
import _ from 'lodash'
import { Affix, Button, Tabs } from 'antd'
import ButtonGroup from 'antd/lib/button/button-group'
import apis from '@/apis/AboutQuota'


const { TabPane } = Tabs;
export default class ImportExportRecordList extends BaseListPage<ImportExportRecordListProps, ImportExportRecordListState> {
    private todoTabTypes: any = [
        {
          name: "导出记录",
          type: 'EXPORT',
        },
        {
          name: "导入记录",
          type: 'IMPORT',
        }
      ]
 private columnsOne:any = [
  ['操作人员', 'createName'],
  {title:'导出类型', key:'type',dataIndex:'type',render:(text)=>text=='EXPORT'?<span>导出记录</span>:<span>导入记录</span>},
  ['数据条数', 'number'],
  ['导出时间', 'createTime'],
]
private columnsTwo:any = [
  ['操作人员', 'createName'],
  {title:'导入类型', key:'type',dataIndex:'type',render:(text)=>text=='EXPORT'?<span>导出记录</span>:<span>导入记录</span>},
  ['数据条数', 'number'],
  ['导入时间', 'createTime'],
]
 constructor(props){
     super(props)
     this.state = {
        title: "导入导出记录",
        rowKey: 'id',
        queryApi: (value)=>{
            let type = 'EXPORT'
            return http.get(apis.excelHistory,{params:{...value,type}})
        },
        method:'GET',
        conditions: [
            { id: ['startTime','endTime'], label: '时间' ,render:()=><UdDateRangePicker />},
        ],
        columns: this.columnsOne
        
    }
 }

 render(){
    const { conditions} = this.state
    return(
     <UdPage className="list-page">
        {
          this.state.title && <UdPageHeader title={this.state.title} subTitle={this.state.subTitle}
            onRefresh={this.query}
            affixProps={{ target: () => this.pageContainer }} />
        }
        {
          (_.isArray(conditions) && conditions.length > 0) && (
            <UdFilter
              loading={this.state.querying} items={conditions}
              getForm={(form) => { this.filterForm = form }}
              onSearch={this.handleSearch} resetAfter={this.filterReset}
            ></UdFilter>
          )
        }

        <Tabs defaultActiveKey="EXPORT" onChange={this.switchTodoTabHandle}>
          {this.todoTabTypes.map(todoTab => (
            <TabPane tab={todoTab.name} key={todoTab.type}>
                <UdTable loading={this.state.querying} rowKey={this.state.rowKey}
                  pagination={this.state.pagination} {...this.state.tableProps}
                  columns={this.state.columns} dataSource={this.state.dataSource}
                  onChange={this.handleTableChange}
                />
            </TabPane>
          ))}
        </Tabs>
          
      </UdPage>
    )
  }
   private switchTodoTabHandle = (key) =>{ //切换tabs
    console.log(key);
    this.setState({
      queryApi: (params) => http.get(apis.excelHistory, { params: { ...params, type: key } })
    }, () => {
      this.query()
    })
    if(key=='EXPORT'){
      this.setState({
          columns:this.columnsOne,
      })
    }else{
        this.setState({
            columns:this.columnsTwo,
        })
    }

   }


   private Batchdownload = () =>{ //批量下载

   }
}


 interface ImportExportRecordListState extends IBaseListPageState {

  }
  
  interface ImportExportRecordListProps extends IBaseListPageProps {
    
  }